<template>
    <div class="main">
        <div class="head">
            <div class="logo"><img src="../assets/logo.png"/></div>
            <div class="menu">
                <router-link v-for="item in menuList" :key="item.url" :to="item.url" :class="{active: item.active}">{{item.name}}</router-link>
                <i-input placeholder="请输入您的项目名称" class="menu-input"></i-input>
            </div>
            <div class="user-info">
                <Dropdown>
                    <a href="javascript:void(0)" style="color: #808695">
                        关于
                        <Icon type="arrow-down-b"></Icon>
                    </a>
                    <DropdownMenu slot="list">
                        <DropdownItem>历史版本</DropdownItem>
                        <DropdownItem>打开提示<Checkbox style="margin-left: 8px" v-model="$store.getters.loginInfo.flag === '1'" @on-change="changeTips"></Checkbox></DropdownItem>
                    </DropdownMenu>
                </Dropdown>

                <Dropdown @on-click="topClick" >
                    <a href="javascript:void(0)">
                        {{loginInfo.name}}
                        <Icon type="arrow-down-b"></Icon>
                    </a>
                    <DropdownMenu slot="list">
                        <DropdownItem name="logout">退出登录</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </div>
        </div>
        <div class="content">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    import { mapState, mapMutations, mapGetters } from 'vuex';
    export default {
        data(){
          return {
            menuList:[{
                url: '/main/project',
                name: '我的项目',
                active: true
            },{
                url: '/main/workspace',
                name: '工作台',
                active: false
            },{
                url: '/main/data',
                name: '数据',
                active: false
            },{
                url: '/main/doc',
                name: '文稿',
                active: false
            },{
                url: '/main/plugins',
                name: '开发',
                active: false
            }]
          };
        },
        created(){
            this.menuList.forEach((item)=>{
                if (item.url === this.$route.path) {
                    item.active = true;
                } else {
                    item.active = false;
                }
            });
        },
        computed: ({
            ...mapState({
                loginInfo: ({ loginStore }) => loginStore.loginInfo
            })
        }),
        methods:{
            changeTips(checked){
                let loginInfo = this.$store.getters.loginInfo;
                loginInfo.flag = checked?'1':'0';
                window.localStorage.loginInfo = JSON.stringify(loginInfo);
                this.$store.commit('CHANGELOGININFO',loginInfo);
            },
            topClick(name) {
                if (name === 'logout') {
                    this.$http.get('/logout').then((response)=>{
                        this.$store.commit('CLEAR_CONFIG');
                        window.localStorage.removeItem('loginInfo');
                        this.$store.commit('CLEAR_MENU');
                        this.$store.dispatch('clearLogin').then(()=>{
                            this.$router.push({path: Util.indexUrl});
                        });
                    }).catch(function (e) {
                        window.localStorage.removeItem('loginInfo');
                        window.location.href = "/";
                    });
                }
            }
        },
        watch:{
            '$route' (to) {
                this.menuList.forEach((item)=>{
                    if (item.url === to.path) {
                        item.active = true;
                    } else {
                        item.active = false;
                    }
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
    .main{
        width: 100%;
        height: 100%;
        min-width: 1360px;
        color: #657180;
        background-color: #f5f5f5;

        .head {
            display: flex;
            padding: 14px 32px;
            font-size: 16px;
            box-shadow: 0 2px 2px rgba(0,0,0,0.03);
            background-color: #fff;
            width: 100%;
            z-index: 100;
            justify-content: space-between;
            align-items: center;

            a {
                color: 	#515a6e;
                &:hover {
                    color: #2d8cf0;
                }
            }

            .logo{
                img{
                    display: table-cell;
                    vertical-align: middle;
                }
            }

            .menu {
                width: 1024px;
                display: flex;
                align-items: center;
                flex-direction: row;
                a{
                    padding: 0 12px;
                    &.active{
                        color: #2d8cf0;
                    }
                    &:first-child{
                        padding-left: 0;
                    }
                }
                .menu-input {
                    padding: 0 12px;
                    width: 200px;
                }
            }

            .user-info {
                width: 180px;
                text-align: right;
                &>div{
                    text-align: left;
                    margin-left: 16px;
                    i{
                        font-size: 12px;
                    }
                }
            }
        }
        .content {
            margin-top: 18px;
            background-color: #f5f5f5;
            &>div{
                height: 100%;
            }
        }
    }

</style>